<style lang="scss" scoped>
  .conic-gradient {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }



  .conic-container {
    padding: 15px 0;
    &::after {
      content: '';
      display: block;
      clear: both;
    }
    .svg-container {
      height: 300px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .w-50 {
      width: 48%;
      float: left;
      &:nth-of-type(even) {
        float: right
      }
    }
  }
</style>

<template>
  <div class="conic-container">
    <div class="conic-gradient">
      <div class="sector" :style="style"></div>

    </div>

    <div class="code language-css extra-class">
      <pre class="language-css"><code
        ref="code"></code></pre>
    </div>
    <div class="w-50">
      <span class="key">{{ __("半径") }}</span>
      <el-slider class="slider" v-model="radius" :min="20"
        :max="150" show-input input-size="mini"></el-slider>
    </div>
    <div class="w-50">
      <span class="key">{{ __("角度") }}</span>
      <el-slider class="slider" v-model="deg" :min="1"
        :max="359" show-input input-size="mini"></el-slider>
    </div>
    <div class="w-50">
      <span class="key">{{ __("起始角度") }}</span>
      <el-slider class="slider" v-model="startAngle"
        :min="0" :max="startMax" show-input
        input-size="mini"></el-slider>
    </div>
    <div class="w-50">
      <span class="key">{{ __("颜色") }}</span>
      <div class="block">
        <el-color-picker v-model="color"></el-color-picker>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'conic-gradient',
    data() {
      return {
        radius: 100,
        deg: 80,
        startAngle: 40,
        color: '#00adb5'
      }
    },
    computed: {
      style: function () {
        const startAngle = Number((this.startAngle / 360 * 100 ).toFixed(2))
        const angle = Number((this.deg / 360 * 100 ).toFixed(2))

        return {
          'width': `${this.radius * 2}px`,
          'height': `${this.radius * 2}px`,
          'border-radius': '50%',
          'background': `conic-gradient(transparent ${startAngle}%, ${this.color} ${startAngle}% ${startAngle + angle}%, transparent ${angle}%)`
        }
      },
      startMax:function () {
        return 360 - this.deg
      }
    },

    watch: {
      style() {
        this.setCode()
      }
    },
    methods: {
      setCode() {
        const code = `.sector {
    width: ${this.style.width};
    height: ${this.style.height};
    border-radius: ${this.style['border-radius']};
    background: ${this.style.background};
  }`
        this.$refs['code'].innerHTML = Prism.highlight(code, Prism.languages.css)
      }
    },
    mounted(){
      setTimeout(() => {
        this.setCode()
      })
    }
  }
</script>
